<!--  coding     :utf-8
      @FileName  :WEBGIS/script.js
      @Time      :2024/02/14
      @Author    :Mingce Zhao -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能施药控制平台</title>
    <link rel="icon" href="/img/T.png" type="image/x-icon" />
    <!-- Leaflet包  -->
    <link rel="stylesheet" href="./lib/leaflet.css" />
    <script src="./lib/leaflet.js"></script>
    <script src="./lib/esri-leaflet.js"></script>
    <script src="./lib/leaflet.rotatedMarker.js"></script>
    <script src="./lib/leaflet.curve.js"></script>

    <script src="./lib/turf.min.js"></script>
    <script src="./lib/turf@latest.js"></script>

    <script src="./lib/real_Time.js"></script>
    <script src="./lib/vconsole.min.js"></script>

    <!-- jquery包  -->
    <script src="./lib/jquery-1.8.0.min.js"></script>

    <!-- three.js包  -->
    <script src="./lib/three.min.js"></script>
    <script src="./lib/OrbitControls.js"></script>
    <script>
        //局内命令反馈
        var vConsole = new VConsole();
        console.log('Hello world');//测试
    </script>
    <style>
        /* 大框架 */
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        /* 容器 */
        .container {
            width: 100%;
            height: 100%;
            display: flex;
        }

        /* 功能栏 */
        .container_left {
            text-align: center;
            width: 30%;
            height: 100%;
            background-color: rgb(255, 255, 255);
        }

        /* 地图 */
        .container_right {
            position: relative;
            /* 为模态框定位提供上下文 */
            width: 80%;
            height: 100%;
            background-color: rgb(255, 255, 255);
        }

        /* 分割线 */
        .line {
            width: 1px;
            margin-top: 5px;
            margin-bottom: 5px;
            background: rgb(176, 176, 176);
            box-shadow: 1px 0px 5px 1px rgba(174, 174, 174, 0.325);
            z-index: 9;
        }

        /* 左上方logo */
        #brand {
            display: flex;
            align-items: center;
            text-align: center;
            flex-wrap: nowrap;
            justify-content: center;
        }

        /* 网页标题图片 */
        #icon {
            width: 30px;
            height: 30px;
        }

        /* 网页内部名称，左上角 */
        #title {
            font-size: 18px;
            padding-left: 15px;
        }

        /* 全部功能位置 */
        .function_all {
            position: relative;
            text-align: center;
            align-items: center;
            flex-wrap: nowrap;
            justify-content: center;
        }

        /* 功能列表 */
        #dataSay,
        #monitor,
        #manage,
        #control,
        #serial,
        #supervise {
            display: flex;
            align-items: center;
            text-align: center;
            flex-wrap: nowrap;
            justify-content: center;
            cursor: pointer;
        }

        /* 功能列表中图标 */
        #f1,
        #f2,
        #f3,
        #f4,
        #f5,
        #f6 {
            width: 30px;
            height: 30px;
        }

        /* 功能列表中文字 */
        #t1,
        #t2,
        #t3,
        #t4,
        #t5,
        #t6 {
            font-size: 18px;
            padding-left: 15px;
        }

        /* 二级菜单 */
        .hide {
            display: none;
        }

        /* .show{
                              display: block;
                          } */


        /* 串口调试，模态对话框样式 */
        .modal {
            position: absolute;
            /* 相对于.container_right定位 */
            z-index: 10000;
            /* 确保模态框在其他内容之上 */
            left: 45%;
            /* 距离容器右边的距离，根据需要调整 */
            bottom: 0px;
            /* 距离容器底部的距离，根据需要调整 */
            width: calc(100% - 45%);
            /* 容器宽度减去右边距，或根据需要设置固定宽度 */
            height: 30%;
            /* 模态框的高度，根据需要调整 */
            background-color: rgba(255, 255, 255);
            /* 调整背景色和透明度 */
        }

        .modal-content {
            background-color: #fefefe;
            padding: 0px;
            border: 1px solid #888;
            height: 100%;
            /* Full height of the modal */
            overflow: auto;
            /*添加滚动条 */
        }

        /* 串口调试，模态对话框关闭图标 */
        .close {
            color: #aaa;
            position: absolute;
            right: 10px;
            top: 10px;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* 串口调试，串口数据发送框 */
        .contacts {
            resize: none;
        }

        /* 定位到所在位置 */
        #locate-btn {
            position: absolute;
            /* Absolute positioning relative to its container */
            bottom: 20px;
            /* Distance from the bottom */
            left: 20px;
            /* Distance from the right */
            z-index: 1000;
            padding: 10px 20px;
            background-color: rgb(255, 255, 255);
            color: rgb(105, 105, 105);
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        /* 给需要滚动的容器添加样式 */
        .hide_left>div {
            max-height: 100vh;
            /* 或者你需要的特定高度 */
            overflow-y: auto;
            /* 当内容超出容器高度时允许垂直滚动 */
        }

        /* 隐藏滚动条 */
        .hide_left>div::-webkit-scrollbar {
            display: none;
            /* 隐藏滚动条 */
        }

        /* 针对非webkit浏览器隐藏滚动条的额外样式 */
        .hide_left>div {
            -ms-overflow-style: none;
            /* IE 和 Edge */
            scrollbar-width: none;
            /* Firefox */
        }

        /* PWM权重值列表 */
        #pointsList {
            max-height: 300px;
            /* 你可以根据需要调整这个值 */
            overflow-y: scroll;
            /* 启用垂直滚动 */
            /* 下面是一些可选的样式，用于美化滚动条 */
            scrollbar-width: thin;
            /* Firefox */
            scrollbar-color: blue gray;
            /* Firefox */
        }

        /* Chrome, Edge, and Safari */
        #pointsList::-webkit-scrollbar {
            width: 12px;
        }

        #pointsList::-webkit-scrollbar-track {
            background: gray;
        }

        #pointsList::-webkit-scrollbar-thumb {
            background-color: blue;
            border-radius: 20px;
            border: 3px solid gray;
        }


        /* 四元数，模态对话框样式 */
        #yuanshu_Modal {
            position: absolute;
            /* 相对于.container_right定位 */
            z-index: 10000;
            /* 确保模态框在其他内容之上 */
            right: 0%;
            /* 距离容器右边的距离，根据需要调整 */
            top: 0px;
            /* 距离容器底部的距离，根据需要调整 */
            width: calc(100% - 80%);
            /* 容器宽度减去右边距，或根据需要设置固定宽度 */
            height: 70%;
            /* 模态框的高度，根据需要调整 */
            background-color: rgba(255, 255, 255);
            /* 调整背景色和透明度 */
        }

        /* 串口调试，模态对话框关闭图标 */
        .close2 {
            color: #aaa;
            position: absolute;
            right: 10px;
            top: 10px;
            font-size: 28px;
            font-weight: bold;
        }

        .close2:hover,
        .close2:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
    <!-- 地图，功能收缩隐藏开关 -->
    <link rel="stylesheet" href="toggle-switch.css" />
    <!-- 二级工具栏 -->
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <div class="container">
        <!-- 界面图标及左侧菜单栏 -->
        <div class="container_left">
            <!-- 界面图标 -->
            <div id="brand">
                <img id="icon" src="../img/title_image.png" alt="图标">
                <p id="title">智能施药控制平台</p>
            </div>
            <!-- 功能列表 -->
            <ul class="function_all">
                <li id="dataSay">
                    <img id="f1" src="../img/statistics.png" alt="数据概述">
                    <p id="t1">数据概述</p>
                </li>
                <li id="monitor">
                    <img id="f2" src="../img/monitor.png" alt="实时监测">
                    <p id="t2">实时监测</p>
                </li>
                <li id="manage">
                    <img id="f3" src="../img/land.png" alt="地块管理">
                    <p id="t3">地块管理</p>
                </li>
                <li id="control">
                    <img id="f4" src="../img/control.png" alt="控制设置">
                    <p id="t4">控制设置</p>
                </li>
                <li id="serial">
                    <img id="f5" src="../img/Serial.png" alt="串口数据">
                    <p id="t5">串口数据</p>
                </li>
                <li id="supervise">
                    <img id="f6" src="../img/supervise.png" alt="硬件监管">
                    <p id="t6">硬件监管</p>
                </li>
            </ul>
        </div>
        <!-- 分割线 -->
        <hr class="line">
        <!-- 二级菜单栏 -->
        <div id="content" class="left-panel">
            <div class="hide" id="dataSayPanel">
                <div id="real_Time"></div>
                <div id="on_place">所在位置</div>
                <div>作物:<input type="text"></div>
                <div>地块面积:<input type="text"></div>
                <div>有效面积:<input type="text"></div>
                <div>施药量:<input type="text"></div>

            </div>
            <div class="hide" id="monitorPanel">
                <div>位置信息:
                    <label class="switch">
                        <input type="checkbox" id="switch_G">
                        <span class="slider round"></span>
                    </label>
                </div>
                <div>路径显示:
                    <label class="switch">
                        <input type="checkbox" id="curveSwitch">
                        <span class="slider round"></span>
                    </label>
                    <button id="saveCurveButton">保存Curve</button>
                    <button id="removeCurveButton">移除Curve</button>
                </div>
                <div>纬度: <span id="latitude"></span>°</div>
                <div>经度: <span id="longitude"></span>°</div>
                <div>航向角: <span id="heading"></span>°</div>
                <div>地面速度: <span id="vel_G"></span>m/s</div>
                <div>球阀开度: <span id="value_du"></span>°</div>
                <div>A压力值: <span id="value_pressure1"></span>mpa</div>
                <div>B压力值: <span id="value_pressure2"></span>mpa</div>
                <div>流量: <span id="value_flow"></span>L/min</div>
                <button id="updateFileListButton">更新文件列表</button>
                <button id="loadFileToMapButton">加载选中文件到地图</button>
                <ul id="fileList"></ul>

            </div>
            <div class="hide" id="managePanel">
                <input type="file" id="geojsonFileInput" accept=".geojson" />
                <button id="updateGeojsonListButton">更新geo列表</button>
                <ul id="geojsonList"></ul>
                <button id="loadGeojsonFileToMapButton">加载到地图</button>
                <button id="remove">移除</button>


            </div>
            <div class="hide" id="controlPanel" class="hide_left">
                <div>每亩施药量：150l/min</div>
                <div>总作用亩：100亩</div>
                <!-- --------------------------------测试------------------------------------- -->
                <h1>开度调整</h1>
                <select id="percentageSelect" onchange="onSelectionChange()">
                    <!-- 使用JavaScript生成选项 -->
                    <script>
                        for (let i = 0; i <= 100; i++) {
                            document.write('<option value="' + i + '">' + i + '%</option>');
                        }
                    </script>
                </select>
                <!-- ------------------------------------------------------------------------- -->
                <br>
                <!-- 在界面中添加输入框元素 -->
                <label for="distanceX">喷杆长度：</label>
                <input type="number" id="distanceX" step="1" value="10"><br>

                <label for="distanceY">喷杆与机具之间距离：</label>
                <input type="number" id="distanceY" step="1" value="2"><br>

                <label for="nozzles">喷头数：</label>
                <input type="number" id="nozzles" step="1" value="21"><br>

                <button id="ok_distance">确定</button>


            </div>
            <!-- <div class="hide" id="serialPanel">
        为串口调试按键，不在二级菜单展示，只使用模态对话框
                </div> -->
            <div class="hide" id="supervisePanel">
                <button id="four_shu">3D展示</button>
                <!--  -----------------------------------测试权重值显示          <h3>点的 NUMPOINTS 值：</h3>-->
                <!--            <h3>点的 NUMPOINTS 值：</h3>-->
                <ul id="pointsList" class="hide_left"></ul>
            </div>

        </div>
        <div id="TB">
            <!-- 左侧面板收缩图标 -->
            <img src="../img/z.png" alt="左侧面板收缩" id="toggleButton" />
        </div>

        <!-- 地图显示区 -->
        <div class="container_right">
            <div id="map" style="width: 100%; height: 100%"></div>
            <button id="locate-btn">定位到当前位置</button>
        </div>
    </div>
    <!-- The Modal -->
    <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
            <span class="close">&times;</span>
            <textarea cols="30" rows="2" id="contacts_S3" class="contacts"></textarea>
            <button onclick="sendMessageToAndroid_S3()">Send Message to S3</button>
            <textarea cols="30" rows="2" id="contacts_S5" class="contacts"></textarea>
            <button onclick="sendMessageToAndroid_S5()">Send Message to S5</button>
            <textarea cols="30" rows="2" id="contacts_S6" class="contacts"></textarea>
            <button onclick="sendMessageToAndroid_S6()">Send Message to S6</button>
            <div id="result_S3">result_S3</div>
            <div id="result_S5">result_S5</div>
            <div id="result_S6">result_S6</div>

            <div id="result_y">result_y</div>
            <div id="result_S5x">result_S5x</div>
            <div id="result_S5c">result_S5c</div>
            <div id="result_S5v">result_S5v</div>
            <div id="result_S5b">result_S5b</div>
            <div id="result_S5n">result_S5n</div>
            <div id="result_S5m">result_S5m</div>

        </div>
    </div>
    <!-- 测试 -->
    <div id="yuanshu_Modal">
        <!-- Modal content -->
        <div class="modal-content">
            <span class="close2">&times;</span>
            <div id="content_fourshu">

            </div>
            <div>
                <div>加速度:
                    x:<span id="x_ac"></span>°
                    y:<span id="y_ac"></span>°
                    z:<span id="z_ac"></span>°
                </div>
                <div>角速度:
                    x:<span id="x_ang"></span>°
                    y:<span id="y_ang"></span>°
                    z:<span id="z_ang"></span>°
                </div>
                <div>磁场:
                    x:<span id="x_mag"></span>°
                    y:<span id="y_mag"></span>°
                    z:<span id="z_mag"></span>°
                </div>
                <div>角度:
                    x:<span id="x_angle"></span>°
                    y:<span id="y_angle"></span>°
                    z:<span id="z_angle"></span>°
                </div>
                <div>四元数:
                    x:<span id="x_qua"></span>°
                    y:<span id="y_qua"></span>°
                    z:<span id="z_qua"></span>°
                </div>
            </div>
        </div>
    </div>
    <!-- ------------------------------ -->
</body>


<!-- 收起 -->
<script src="modal.js"></script>
<!-- 主要功能 -->
<script src="script.js"></script>


<!-- 球阀开度测试 -------------------------------------------------------------->
<script>
    // 预定义的代码
    const codeFor0Percent = '07 10 01 90 00 01 02 0F A0';
    const codeFor100Percent = '07 10 01 90 00 01 02 4E 20';

    // 将代码转换为字节数组
    function codeToBytes(code) {
        return code.split(' ').map(byte => parseInt(byte, 16));
    }

    // 计算两个字节之间的插值
    function interpolateByte(byte0, byte100, percentage) {
        return Math.round(byte0 + (byte100 - byte0) * (percentage / 100));
    }

    // CRC-16-MODBUS校验位计算
    function calculateCRC(bytes) {
        let crc = 0xFFFF;
        for (let pos = 0; pos < bytes.length; pos++) {
            crc ^= bytes[pos];
            for (let i = 8; i !== 0; i--) {
                if ((crc & 0x0001) !== 0) {
                    crc >>= 1;
                    crc ^= 0xA001;
                } else {
                    crc >>= 1;
                }
            }
        }
        // 交换CRC的高低字节，因为MODBUS协议中CRC低字节在前
        return [(crc & 0xFF), (crc >> 8)];
    }

    // 根据百分比插值计算代码，最后添加CRC校验位
    function calculateCode(percentage) {
        const bytesFor0Percent = codeToBytes(codeFor0Percent);
        const bytesFor100Percent = codeToBytes(codeFor100Percent);
        const interpolatedBytes = bytesFor0Percent.map((byte0, index) => {
            const byte100 = bytesFor100Percent[index];
            return interpolateByte(byte0, byte100, percentage);
        });

        // 添加CRC校验位
        const crcBytes = calculateCRC(interpolatedBytes);
        interpolatedBytes.push(...crcBytes); // 将CRC校验位追加到数据末尾

        // 将字节转换回代码格式
        return interpolatedBytes.map(byte => byte.toString(16).padStart(2, '0').toUpperCase()).join('');
    }

    // 当选择改变时触发
    function onSelectionChange() {
        const selectElement = document.getElementById('percentageSelect');
        const selectedValue = parseInt(selectElement.value, 10);
        const code = calculateCode(selectedValue);
        console.log("发送的代码: ", code); // 在控制台显示发送的代码，实际使用时应发送到服务器
        window.android.receiveMessageFromS6(code);
    }

</script>
<!-- -------------------------------------------------------------------------------------------- -->

</html>